<template>
    <div>
<el-dialog center width="50%" 
    custom-class="select-sheet-table-div" 
    :visible.sync="LogingPanel"
    :close-on-press-escape="false" 
    :close-on-click-modal="false" 
    :show-close="false">
    <div slot="title" class="div-text-align-right">
        <img src="@/assets/images/button/62.png" @click="closeSheet" width="46" height="46" alt="">
    </div>
    <el-tabs v-model="activeName" v-loading="loadingList">
        <el-tab-pane label="赛事结果" name="response">
            <el-row :gutter="20">
                <el-col :span="7">
                    <div style="width: 100%;  height: 260px;">
                        <el-image style="width: 100%; height: 100%" src="url" fit="cover"></el-image>
                    </div>
                </el-col>
                <el-col :span="17">
                    <div style="width: 100%; height: 260px; text-align: center;" >
                        <h1 style="color: #fff;" v-if="response_info.room_info.win == '1'">【平民玩家】赢得本场胜利</h1>
                        <h1 style="color: #fff;" v-else-if="response_info.room_info.win == '2'">【卧底玩家】赢得本场胜利</h1>
                        <h1 style="color: #fff;" v-else>【双面间谍】赢得本场胜利</h1>
                        <br>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-button type="primary" style="width: 100%;" icon="el-icon-time">{{ response_info.room_info.game_start_time }} 开始</el-button>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" style="width: 100%;">{{ response_info.room_info.end_time }} 结束</el-button>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <br>
                        <h2 style="color: #fff; text-align: left; text-overflow: ellipsis;">赛事奖励：</h2>
                        <h4 style="color: #fff; text-align: left; text-overflow: ellipsis;">{{ response_info.room_info.room_reward }}</h4>
                    </div>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="投票流水" name="vote">
            <el-table :data="response_info.report_list" border height="260" style="width: 100%">
                <el-table-column prop="player_nickname" label="昵称" width="180"></el-table-column>
                <el-table-column prop="identity" label="举报人" width="180">
                    <template slot-scope="scope">
                        <el-tag v-for="(items, key) in scope.row.report_list" :key="key" type="info" effect="dark"> {{ items }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="全体身份卡" name="task">
            <el-table :data="response_info.player_list" border height="260" style="width: 100%">
                <el-table-column prop="player_nickname" label="昵称" width="180"></el-table-column>
                <el-table-column label="身份卡" width="180">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.identity == 1" type="success" effect="dark">平民</el-tag>
                        <el-tag v-else-if="scope.row.identity == 2" type="danger" effect="dark">卧底</el-tag>
                        <el-tag v-else type="warning" effect="dark">双面间谍</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="task" label="游戏任务">
                    <template slot-scope="scope">
                        <span v-for="(items, key) in scope.row.task" :key="key">{{ items }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>

</el-dialog>
    </div>
</template>

<script>
export default {
    name:'uioResponse',
    props:{
        LogingPanel:{
            required: true,//是否是必要传值  可不要时为 false
            type: Boolean, //定义类型 类型  ：字符串类型、
            default: false,   //没有传值的话 默认值 一般与 required:false 一起用
        },
        RoomCode: {
            required: true,//是否是必要传值  可不要时为 false
            type: String, //定义类型 类型  ：字符串类型、
            default: "",   //没有传值的话 默认值 一般与 required:false 一起用
        }
    },
    data() {
        return {
            loadingList: false,
            activeName:'response',
            response_info: {},
        }
    },
    watch:{
        LogingPanel: {
            handler(newValue, oldValue) {
                console.log("LogingPanel newValue, oldValue :", newValue, oldValue);
                if (!!newValue) {
                    this.GetResponse();
                }
            },
            deep: true,
        },
    },
    methods: {
        GetResponse() {
            this.loadingList = true;
            this.$post('/api/rooms/response.html', {room_code: this.RoomCode}).then(res => {
                if (res.code == 200) {
                    this.response_info = res.data;
                } else {
                    this.$notify.error({ title: '', message: res.msg});
                }
                this.loadingList = false;
            }).catch(err => {
                this.loadingList = false;
                console.log(err);
            });
        },
        closeSheet() {
            this.$emit('closeDialog', 'logingPanel', false);
        },
    },
}
</script>


<style scoped>
</style>



